<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="图片轮播，图片切换，焦点图" />
    <meta name="description" content="这是一个基于jquery的图片轮播效果演示页" />
    <title>演示:滑动切换效果</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="flexslider.css" />
    <style type="text/css">
    #main {
        width: 60%
    }
    .slides li p {
        height: 24px;
        line-height: 24px;
        text-align: center
    }
    </style>
    <script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.flexslider-min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(".flexslider").flexslider({
            animation: "slide",
            animationLoop: true,
            itemWidth: 210,
            itemMargin: 5,
            // minItems: 2,
            maxItems: 4,
          slideshowSpeed: 2000, //自动播放时间
           
        });
    });
    </script>
</head>
<body>
    <div id="main">
        <div class="flexslider carousel">
            <ul class="slides">
                <li><img src="images/sc1.jpg" />
                    <p>图片展示1</p>
                </li>
                <li><img src="images/sc2.jpg" />
                    <p>图片展示2</p>
                </li>
                <li><img src="images/sc3.jpg" />
                    <p>图片展示3</p>
                </li>
                <li><img src="images/sc4.jpg" />
                    <p>图片展示4</p>
                </li>
                <li><img src="images/sc5.jpg" />
                    <p>图片展示5</p>
                </li>
                <li><img src="images/sc6.jpg" />
                    <p>图片展示6</p>
                </li>
                <li><img src="images/sc1.jpg" />
                    <p>图片展示7</p>
                </li>
                <li><img src="images/sc2.jpg" />
                    <p>图片展示8</p>
                </li>
                <li><img src="images/sc3.jpg" />
                    <p>图片展示9</p>
                </li>
                <li><img src="images/sc4.jpg" />
                    <p>图片展示10</p>
                </li>
                <li><img src="images/sc5.jpg" />
                    <p>图片展示11</p>
                </li>
                <li><img src="images/sc6.jpg" />
                    <p>图片展示12</p>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>
